import { useState } from 'react';
import { Card, ResourceList, ResourceItem, Thumbnail, Text, Button, Popover, ActionList } from '@shopify/polaris';
import './IconLibrary.css';

interface IconLibraryProps {
  onIconSelect: (icon: any) => void;
}

interface Icon {
  id: string;
  name: string;
  url: string;
  thumbnail: string;
}

export const IconLibrary: React.FC<IconLibraryProps> = ({ onIconSelect }) => {
  const [selectedIcon, setSelectedIcon] = useState<string | null>(null);
  const [popoverActive, setPopoverActive] = useState(false);

  // 本地图标列表
  const icons: Icon[] = [
    {
      id: 'sd',
      name: 'SD',
      url: '/assest/image/sd.png',
      thumbnail: '/assest/image/sd.png'
    },
    {
      id: 'lc',
      name: 'LC',
      url: '/assest/image/lc.png',
      thumbnail: '/assest/image/lc.png'
    },
    {
      id: 'xqc',
      name: 'XQC',
      url: '/assest/image/xqc.png',
      thumbnail: '/assest/image/xqc.png'
    },
    {
      id: 'yyc',
      name: 'YYC',
      url: '/assest/image/yyc.png',
      thumbnail: '/assest/image/yyc.png'
    },
    {
      id: 'czc',
      name: 'CZC',
      url: '/assest/image/czc.png',
      thumbnail: '/assest/image/czc.png'
    },
    {
      id: 'xmt',
      name: 'XMT',
      url: '/assest/image/xmt.png',
      thumbnail: '/assest/image/xmt.png'
    },
    {
      id: 'xlm',
      name: 'XLM',
      url: '/assest/image/xlm.png',
      thumbnail: '/assest/image/xlm.png'
    },
    {
      id: 'bm',
      name: 'BM',
      url: '/assest/image/bm.png',
      thumbnail: '/assest/image/bm.png'
    },
    {
      id: 'hsq',
      name: 'HSQ',
      url: '/assest/image/hsq.png',
      thumbnail: '/assest/image/hsq.png'
    },
    {
      id: 'bom',
      name: 'BOM',
      url: '/assest/image/bom.png',
      thumbnail: '/assest/image/bom.png'
    }
  ];

  const handleIconClick = (icon: Icon) => {
    console.log('Icon clicked:', icon); // 调试信息
    setSelectedIcon(icon.id);
    const iconData = {
      id: icon.id,
      url: icon.url,
      name: icon.name
    };
    console.log('Sending icon data:', iconData); // 调试信息
    onIconSelect(iconData);
  };

  const handleDragStart = (e: React.DragEvent, icon: Icon) => {
    // 获取图标元素
    const iconElement = e.currentTarget as HTMLElement;
    const rect = iconElement.getBoundingClientRect();
    
    // 计算鼠标在图标内的相对位置
    const offsetX = e.clientX - rect.left;
    const offsetY = e.clientY - rect.top;
    
    // 设置拖拽数据
    const dragData = {
      ...icon,
      offsetX,
      offsetY
    };
    
    e.dataTransfer.setData('application/json', JSON.stringify(dragData));
    e.dataTransfer.effectAllowed = 'copy';
    
    // 设置拖拽图像
    const dragImage = new Image();
    dragImage.src = icon.thumbnail;
    dragImage.width = rect.width;
    dragImage.height = rect.height;
    
    // 设置拖拽时的预览图像
    e.dataTransfer.setDragImage(dragImage, offsetX, offsetY);
  };

  const togglePopover = () => {
    setPopoverActive(!popoverActive);
  };

  const renderItem = (item: Icon) => {
    const { id, name, thumbnail } = item;
    const media = <Thumbnail source={thumbnail} alt={name} />;

    return (
      <ResourceItem
        id={id}
        onClick={() => handleIconClick(item)}
        media={media}
        accessibilityLabel={`View details for ${name}`}
        name={name}
        draggable
        onDragStart={(e) => handleDragStart(e, item)}
      />
    );
  };

  return (
    <Card>
      <div className="icon-library">
        <div className="icon-library-header">
          <Text variant="headingMd" as="h2">图标库</Text>
          <Popover
            active={popoverActive}
            activator={
              <Button onClick={togglePopover} disclosure>
                更多视图
              </Button>
            }
            onClose={togglePopover}
          >
            <ActionList
              items={[
                {
                  content: '网格视图',
                  onAction: () => {
                    // 实现网格视图切换
                    togglePopover();
                  },
                },
                {
                  content: '列表视图',
                  onAction: () => {
                    // 实现列表视图切换
                    togglePopover();
                  },
                },
              ]}
            />
          </Popover>
        </div>
        <div style={{ flex: 1, overflow: 'hidden' }}>
          <ResourceList
            items={icons}
            renderItem={renderItem}
            selectedItems={selectedIcon ? [selectedIcon] : []}
          />
        </div>
      </div>
    </Card>
  );
}; 